<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">
    <style>
       .drag{
           position:absolute;top:0;left:0;width: 100px;height: 100px; background: red;
       }
    </style>

</head>
<body>
    <div id="app">
         <div v-drag class="drag"></div>
        <div v-drag class="drag"></div>
    </div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm =  new Vue({
        el: '#app',
        directives:{
            drag(el,bindings){
                el.onmousedown = function (e) {
                    console.log('1');
                    var disx = e.pageX - el.offsetLeft;
                    var disy = e.pageY - el.offsetTop;
                    console.log(disx,disy);
                    document.onmousemove = function (e) {
                        console.log(2);
                       el.style.left = e.pageX - disx+'px';
                       el.style.top = e.pageY - disy + 'px';
                    }
                    document.onmouseup = function () {
                        document.onmousemove = document.onmouseup = null;
                    }
                }
            }
        },
        data:{

        }

    })
</script>
</html>